<template>
  <div>
    <div class="bottom-nav">
      <!-- 底部导航栏 -->
      <ul>
        <li>
          <router-link to="/index">
            <div class="icon">
              <van-icon name="wap-home-o" size="20" />
            </div>
            <div class="text">首页</div>
          </router-link>
        </li>
        <li>
          <router-link to="/HotList">
            <div class="icon">
              <van-icon name="fire-o" size="20" />
            </div>
            <div class="text">热榜</div>
          </router-link>
        </li>
        <li>
          <router-link to="/music">
            <div class="icon">
              <van-icon name="service-o" size="20" />
            </div>
            <div class="text">音乐</div>
          </router-link>
        </li>
        <li>
          <div @click="jump">
            <div class="icon" >
              <van-icon name="user-o" size="20" />
            </div>
            <div class="text">我的</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  methods: {
    jump() {
      if (this.Whether == 0) {
        this.$router.push("/user");
      } else {
        this.$router.push("/Login");
      }
    }
  },
  computed: {
    ...mapState({
      Whether: "Whether"
    })
  }
};
</script>
<style lang="less" scoped>
  .bottom-nav {
    width: 100%;
    height: 50px;
    background-color: #f7f4f4;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      list-style: none;
      li {
        width: 25%;
        height: 100%;
        text-align: center;
        .icon {
          margin-top: 3px;
        }
      }
    }
  }
  .router-link-active {
    color: red !important;
  }
  /deep/ a:-webkit-any-link {
    color: black;
  }
</style>